<template>
	<view class="">
		<view class="head-wrap">
			<view class="head dis">
				<view class="head-img">
					<image :src="orderInfo.image" mode=""></image>
				</view>
				<view class="head-msg">{{orderInfo.name}}
				</view>
			</view>
		</view>
		<view class="btn-wrap">

			<view class="btn-msg" v-for="(item,index) in btnList" :key="index" @click="btnTag(index)"
				:class="btnIndex==index?'activeBtn':''">{{item}}</view>

		</view>
		<view class="" style="margin: 20rpx 0;background: #fff;padding: 20rpx 0;" v-if="btnIndex==0">

			<view class="" v-for="(items,indexs) in orderInfoList" :key="indexs">
				<uni-collapse>
					<uni-collapse-item titleBorder="none">
						<template v-slot:title>
							<view class="titiles ">
								<view class="titiles-up dis">
									<view class="titiles-up-left">
										第{{items.batch}}份
									</view>
									<view class="titiles-up-right" @click.stop="delePro(items,indexs)">
										<image src="@/static/com/icon_sc.png" mode=""></image>
									</view>
								</view>
								<view class="titiles-bom">若被赠送人7天内未接收赠送则对应转赠批次将自动退回</view>
							</view>
						</template>
						<view class="content">
							<!-- {{orderInfo.orderInfoList.length}} -->
							<view class="block_4 flex-row" v-for="(item,index) in items.productList" :key="index">

								<image class="image_2" referrerpolicy="no-referrer" :src="item.image" />
								<view class="box_6 flex-col">
									<view class="text_6 dis justify-between">
										<view class="line1">产品名称:{{item.storeName}}</view>
										<view>剩余：{{item.yieldNum}}</view>
									</view>
									<view v-if="item.type == 0">
											<view class="text_6">产量:{{item.yield}}</view>
									</view>
									<view v-if="item.type == 7 || item.type== 8">
											<view class="text_6">数量:{{item.yield}}</view>
									</view>
									<view v-if="null != item.getDay">
										<view class="text_6">可提货时间:{{item.getDay}}</view>
									</view>
									<view class="box_7 flex-row">
										<!-- <view class="text_9">生长进度:</view> -->
										<!-- <view class="group_1 flex-col">
											<progress percent="20" border-radius="30" show-info stroke-width="6" />
										</view> -->
										<view class="text_10">
											<uni-number-box :min="0" @change="numChange(items,item,index)"
												:max="item.yieldNum" v-model="item.optNum" />
										</view>
									</view>
								</view>
							</view>

						</view>

					</uni-collapse-item>
					<!-- <uni-collapse-item title="折叠内容使用 uni-list 组件">
						<uni-list>
							<uni-list-item title="列表文字"></uni-list-item>
							<uni-list-item :disabled="true" title="列表文字" note="列表禁用状态"></uni-list-item>
							<uni-list-item title="列表右侧显示 switch" :show-switch="true"></uni-list-item>
							<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon" title="列表左侧带扩展图标"></uni-list-item>
							<uni-list-item title="列表左侧带略缩图" note="列表描述信息"
								thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" thumb-size="lg"
								rightText="右侧文字" showArrow></uni-list-item>
							<uni-list-item title="开启点击反馈" clickable showArrow @click="onClick"></uni-list-item>
						</uni-list>
					</uni-collapse-item> -->
				</uni-collapse>

			</view>

		</view>
		<view class="" style="margin: 20rpx 0;background: #fff;padding: 20rpx 0;" v-if="btnIndex==1">
			<view class="dis" style="align-items: center;
    padding: 10rpx 26rpx;">
				<text style="margin-right: 20rpx;">批次:</text>

				<uni-easyinput v-model="allpc.batch" placeholder="请输入批次" />
			</view>
			<view class="content">
				<!-- {{orderInfo.orderInfoList.length}} -->
				<view class="block_4 flex-row" v-for="(item,index) in allPcList" :key="index">
					<!-- <image class="image_2" src="../../../static/logo.png" mode=""></image> -->
					<image class="image_2" referrerpolicy="no-referrer" :src="item.image" />
					<view class="box_6 flex-col">
						<view class="text_6 dis justify-between">
							<view class="line1">产品名称:{{item.storeName}}</view>
							<view>剩余：{{item.yieldNum}}</view>
						</view>
						<view class="text_6">产量:{{item.yield}}</view>
						<view class="text_6">可提货时间:{{item.getDay}}</view>
						<view class="box_7 ">
							<!-- <view class="text_9">生长进度:</view> -->
							<!-- <view class="group_1 flex-col">
								<progress percent="20" border-radius="30" show-info stroke-width="6" />
							</view> -->
							<view class="text_10">
								<uni-easyinput :min="0" :max="item.yieldNum" v-model="item.num"
									placeholder="请输入该批次的数量" />
							</view>
						</view>
					</view>
				</view>

			</view>




		</view>
		<view class="ding">

		</view>
		<view class="footer">
			<view class="footer-btn dis">
				<view class="add" @click="getAtoList()" v-if="btnIndex==0">添加赠送</view>
				<view class="ok" @click="submit">确认赠送</view>

			</view>

		</view>
		<uni-popup ref="checPickupPup" type="center" :mask-click="true">
			<view class="safeguardPup-wrap">

				<view class="safeguardPup-head safeguardPup-head1 dis">
					<view class="">

					</view>
					<view class="safeguardPup-head-center">转增二维码</view>
					<view class="safeguardPup-head-right" @click="this.$refs.checPickupPup.close()">
						<image src="@/static/com/icon_close.png" mode=""></image>
					</view>
				</view>
				<view class="safeguardPup-msg dis">
					<view class="safeguardPup-msg-msg">用于自提订单核销</view>
					<view class="safeguardPup-msg-img">
						<canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
					</view>
					<view class="safeguardPup-msg-msg">保存后请使用本小程序首页或者我的里面的“扫一扫”进行转增</view>
					<view class="safeguardPup-msg-msg safeguardPup-msg-msg1" @click="saveImg">点击保存</view>
				</view>

			</view>

		</uni-popup>
	</view>
</template>

<script>
	import {
		getAtoq,
		getAtoL,
		getAto,
		getTransOrderDel,
		getAdoptionqueryAll,
		getbatchTransOrder
	} from '@/api/togeterRich/order.js'
	import {
		getOrderDetail,
		orderTake,
		orderDel,
		orderCancel,
		qrcodeApi,

	} from '@/api/order.js';
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
	export default {
		data() {
			return {
				allpc: {
					batch: null
				},
				btnIndex: 0,
				btnList: ['单批次', '多批次'],
				orderInfoList: [],
				orderInfo: {},
				vModelValue: '',
				// 二维码标识串
				qrcodeText: '',
				// 二维码尺寸
				qrcodeSize: 136,

				// 最终生成的二维码图片
				qrcodeSrc: '',
				order_id: '',
				pc: 1,
				allList: [],
				zsKey: '',
				numberBoxClickTypeMsg: 'add',
				id: '',
				allPcList: []
			}
		},
		onLoad(options) {
			this.id = options.id
			this.order_id = options.order_id
			this.getOrderInfo()
		},
		methods: {
			btnTag(index) {
				this.btnIndex = index
				if (this.btnIndex == 1) {
					let data = {
						id: this.id
					}
					getAdoptionqueryAll(data).then(res => {
						// console.log(res, 'jjjjj')
						this.allPcList = res.data
						this.allPcList.map(reee => {

							this.$set(reee, 'num', null)

						})
					})
				} else {
					this.orderInfoList = []
				}
			},

			numberBoxClickType(type) {
				if (type == 'minus') {
					this.numberBoxClickTypeMsg = "jian"
				} else if (type == 'minus') {
					this.numberBoxClickTypeMsg = "add"
				}
				// this.numberBoxClickTypeMsg = type
				// console.log(type, 'dddddddddddddddd')
			},
			delePro(item, indexs) {
				console.log(item, ';;;')

				let data = {
					batch: item.batch,
					key: item.key
				}

				getTransOrderDel(data).then(res => {
					this.orderInfoList.splice(indexs, 1)
					this.getQury()
					console.log(res, 'ddd')
				})
			},
			// getAtoListq(type) {
			// 	this.getAtoList(type)
			// 	// this.numChange()
			// },
			getAtoList(type) {
				this.getSave(1)
			},
			getQury() {
				let dataCommit = {}
				if (this.orderInfoList.length != 0) {
					dataCommit.batch = this.pc
					dataCommit.id = this.orderInfo.id
					dataCommit.key = this.zsKey
				} else {
					dataCommit.batch = this.pc
					dataCommit.key = this.zsKey
					dataCommit.id = this.orderInfo.id
				}
				console.log(dataCommit, '暂存后的列表')
				getAtoL(dataCommit).then(res => {
					console.log(res, 'dfd')
					// this.pc = res.batch
					if (res.data && res.data.length != 0) {
						this.orderInfoList = res.data
						// this.orderInfoList.push(res.data[0])
						this.pc++
					}
					console.log(this.orderInfoList, 'orderInfoList')
				})
			},
			getSave(type, items, item, index) {
				let dataCommit = {}
				if (type == 1) {
					if (this.orderInfoList.length != 0) {
						dataCommit.id = this.orderInfo.id
						dataCommit.key = this.orderInfoList[0].key
					} else {
						dataCommit.id = this.orderInfo.id
					}
				} else {
					console.log(items, item, index, 'items, item, index')
					dataCommit = {
						key: items.key,
						"batch": items.batch,
						"id": item.id,
						"productList": [{
							"id": item.productId,
							"num": item.optNum
						}]
					}

				}
				getAtoq(dataCommit).then(res => {
					console.log(res.message, 'ddd')
					this.zsKey = res.message
					console.log(this.zsKey, 'ccc')
					this.getQury()
				})
			},
			numChange(items, item, index) {
				this.getSave(2, items, item, index)
			},
			getOrderInfo: function() {
				let that = this;
				uni.showLoading({
					title: "正在加载中"
				});
				getOrderDetail(that.order_id).then(res => {
					uni.hideLoading();
					that.$set(that, 'orderInfo', res.data);
					that.$set(that, 'evaluate', res.data.status == 2 ? 2 : 0);
					that.$set(that, 'system_store', res.data.systemStore);
					that.$set(that, 'id', res.data.id);
					that.$set(that, 'cartInfo', res.data.orderInfoList);
					if (res.data.refundStatus != 0) {
						that.isGoodsReturn = true;
					};
					// if (that.orderInfo.shippingType == 2 && that.orderInfo.paid) that.markCode(res.data
					// 	.verifyCode);
					if (that.orderInfo.refundStatus > 0) {
						uni.setNavigationBarColor({
							frontColor: '#ffffff',
							backgroundColor: '#666666'
						})
					}
				})
			},
			saveImg() {
				let that = this
				uni.saveImageToPhotosAlbum({
					filePath: that.qrcodeSrc,
					success: function() {
						console.log('save success');
					}
				});

			},
			// 查看二维码
			checPickup() {
				uni.showLoading({
					title: '二维码生成中',
					mask: true
				})

				uQRCode.make({
					canvasId: 'qrcode',
					text: this.qrcodeText,
					size: this.qrcodeSize,
					margin: 10,
					success: res => {
						this.qrcodeSrc = res
						console.log('qrcodeSrc = ' + this.qrcodeSrc);
					},
					complete: () => {
						uni.hideLoading()
					}
				})
				this.$refs.checPickupPup.open()
			},
			submit() {
				let that = this
				let submitData = {
					id: '',
					size: '',
					item: {
						productList: [],
						batch: ''
					}
				}
				let itemList = []
				if (this.btnIndex == 1) {


					if (!this.allpc.batch) {
						uni.showToast({
							title: "请填写批次!",
							icon: 'none',
							duration: 2000
						})
						return;
					}
					this.allPcList.map(ree => {
						let d = {
							"id": ree.id,
							"num": ree.num
						}
						itemList.push(d)
						// console.log(ree, 'ddd')
					})

					submitData.item.productList = itemList
					submitData.id = this.id
					submitData.item.batch = this.allpc.batch

					submitData.size = this.allpc.batch

					getbatchTransOrder(submitData).then(ress => {
						console.log(ress, 'ddd')
						if (ress.data && ress.data.id) {
							uni.showModal({
								title: '转赠生成成功',
								content: '快去分享二维码给好友进行领取吧 若被赠送人7天内未接收赠送则对应转赠批次将自动退回',
								confirmText: "转赠记录", // 确认按钮的文字  
								showCancel: false, // 是否显示取消按钮，默认为 true
								cancelText: "二维码",
								confirmColor: '#46B681',
								cancelColor: '#39B54A',
								success: (res) => {
									if (res.confirm) {
										uni.navigateTo({
											url: "/pagesB/fosterOrder/increaseTransferring/record?order_id=" +
												ress.data.id
										})
										console.log('comfirm') //点击确定之后执行的代码
									} else {
										that.qrcodeText = ress.data.id
										that.checPickup()
										return;
										console.log('cancel') //点击取消之后执行的代码
									}
								}
							})
						} else {
							uni.showToast({
								title: "礼包里面没有添加转赠商品!",
								icon: 'none',
								duration: 2000
							})

						}
					})

					console.log(submitData, '要穿的数据？')

				} else {
					if (this.orderInfoList.length == 0) {
						uni.showToast({
							title: "请先添加转赠!",
							icon: 'none',
							duration: 2000
						})
						return;
					}
					console.log(this.orderInfoList,'this.orderInfoList')
					let data = {
						key: this.zsKey,
						id: this.orderInfo.id
					}
					console.log(data, 'lll')
					getAto(data).then(ress => {


						if (ress.data && ress.data.id) {
							uni.showModal({
								title: '转赠生成成功',
								content: '快去分享二维码给好友进行领取吧 若被赠送人7天内未接收赠送则对应转赠批次将自动退回',
								confirmText: "转赠记录", // 确认按钮的文字  
								showCancel: false, // 是否显示取消按钮，默认为 true
								cancelText: "二维码",
								confirmColor: '#46B681',
								cancelColor: '#39B54A',
								success: (res) => {
									if (res.confirm) {
										uni.navigateTo({
											url: "/pagesB/fosterOrder/increaseTransferring/record?order_id=" +
												ress.data.id
										})
										console.log('comfirm') //点击确定之后执行的代码
									} else {
										that.qrcodeText = ress.data.id
										that.checPickup()
										return;
										console.log('cancel') //点击取消之后执行的代码
									}
								}
							})
						} else {
							uni.showToast({
								title: "礼包里面没有添加转赠商品!",
								icon: 'none',
								duration: 2000
							})

						}
					})
				}


				// return;





			},
		}
	}
</script>

<style lang="scss" scoped>
	.btn-wrap {
		width: 100%;
		// margin: 0 auto;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;

		.btn-msg {
			border-radius: 100rpx;
			width: 45%;
			text-align: center;
			background: #fff;
			padding: 20rpx;
			border: 1rpx solid #333;
		}
	}

	.activeBtn {
		color: #fff;
		border: 1rpx solid $maincolor !important;
		background: $maincolor !important;
	}

	.safeguardPup-wrap {
		.safeguardPup-msg {
			width: 80%;

			margin: 30rpx auto;
			justify-content: space-between;
			font-size: 28rpx;
			flex-direction: column;
			text-align: center;

			.safeguardPup-msg-msg1 {
				color: $maincolor;
				font-size: 30rpx;
				margin: 20rpx 0;
			}

			.safeguardPup-msg-msg {
				text-align: center;
			}

			.safeguardPup-msg-img {
				width: 250rpx;
				height: 250rpx;
				margin: 30rpx auto;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.safeguardPup-head1 {
			justify-content: space-between;
			padding: 36rpx 36rpx 0 36rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}


		width: 600rpx;

		background: #fff;
		border-radius: 20rpx;
	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		background: #fff;
		z-index: 1000;
		padding: 30rpx 0;

		.footer-btn {
			.add {
				width: 34%;
			}

			.ok {
				width: 60%;
			}

			view {

				margin: 0 auto;
				font-size: 28rpx;
				line-height: 80rpx;
				border-radius: 100rpx;
				background: $maincolor;
				text-align: center;
				color: #fff;
			}


		}
	}

	.titiles {
		height: 130rpx;
		margin-left: 20rpx;

		.titiles-bom {
			font-size: 22rpx;
			color: #999;
			margin-top: 20rpx;
		}

		.titiles-up {
			align-items: center;

			.titiles-up-left {
				font-size: 32rpx;
				color: #333;
				padding-left: 20rpx;
				border-left: 7rpx solid;

				border-left: 6rpx solid $maincolor;
			}

			.titiles-up-right {
				width: 30rpx;
				margin-left: 20rpx;
				height: 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.head-wrap {
		background: #fff;
		width: 100%;
		padding: 20rpx 0;

		.head {
			width: 92%;
			margin: 20rpx auto;

			.head-img {
				width: 170rpx;
				height: 170rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.head-msg {
				margin-left: 20rpx;
				width: 70%;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 5;
				/* 限制在三行 */
				-webkit-box-orient: vertical;

			}
		}

	}

	@import '@/pagesB/fosterOrder/com/obtainable.css';
	@import '@/com/css/common.css';
</style>